<template>
    <div class="chugui">
        <div class="title">
            <h1><img src="@/assets/index/yg-title.png" alt=""></h1>
            <router-link to="/productList">查看更多></router-link>
        </div>
        <div class="body">
            <ul class="tabs">
                <li 
                v-for="(item,index) of this.tabs"
                @click="tab(index)"
                :key="item.tab"
                :class="item.show==true?'active':''"
                class="tab-item">{{item.tab}}</li>
                
            </ul>
            <router-link 
            to="/productList"
            class="show-item"
            v-show="item.show"
            v-for="(item) of this.litter"
            :key="item.id"
            >
                <!-- {{index}} -->
                <div class="img-box">
                    <img :src="item.main_img_url" alt="">
                </div>
                
            </router-link>

            <!-- <div v-show="this.tabs[1].show">2</div> -->
            <!-- <div v-show="this.tabs[2].show">3</div> -->
            <!-- <div v-show="this.tabs[3].show">4</div> -->
           
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
let tabs=[
            {"tab":"客厅","show":true,"title":"1111"},
            {"tab":"餐厅","show":false,"title":"2222"},
            {"tab":"卧室","show":false,"title":"3333"},
            {"tab":"书房","show":false,"title":"3333"}
        ];
export default {
    name: 'yigui',
    data () {
        return {
            username:"",
            phone:"",
            message:'嘉宝官网移动端首页报名',
            description:'嘉宝官网移动端首页报名',
            local:'嘉宝官网移动端首页报名',
            tabs:tabs,
            litter:[],
            categoryName:'衣柜'
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    mounted(){
        this.getInfo()
    },
    methods:{
       tab:function(index){

                    for(var i=0;i<this.tabs.length;i++){
                        this.tabs[i].show=false;
                        if(i==index){
                            this.tabs[index].show=true;
                        }
                    }
                     for(var i=0;i<this.litter.length;i++){
                        this.litter[i].show=false;
                        if(i==index){
                            this.litter[index].show=true;
                        }
                    }
       },
       getInfo(){
     
            axios.get(this.baseUrl+'product/to_index_product',
                {
                    params:{
                            categoryName:this.categoryName
                            }
                    
                }
                    )
            .then(this.getInfoSucc)
        },
        getInfoSucc(response){
        //   console.log(response)
            // console.log('橱柜成功')
            
            // this.big = response.data.big
            // this.bigurl = this.big.indeximg.url
            this.litter = response.data.litter
            
            for(var i=0;i<this.litter.length;i++){
                this.litter[i].show=false;
                if(i==0){
                    this.litter[i].show=true;
                }
            }
            console.log(this.litter)
        }

    },
}
</script>


<style lang="stylus" scoped>
// 1rem = html font-size = 50px

@import "~@styles/varibles.styl";
@import "~@styles/mixins.styl";
.chugui 
    background white
    // margin-bottom 0.2rem
    margin-top 0.2rem
    overflow hidden
img 
    width 100%
.title 
    title()
.title>h1
    title_h1()
.title>a
    title_a()
.body 
   chugui_body()
.tabs 
    tabs()
.tab-item 
    tab_item()
.active 
    tab_active()
.img-box 
    img_box()
.show-item 
    display block
</style>
